<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@include file="../common/jspcommon.jsp"%>
<%@include file="../common/jscss.jsp"%>
<!-- 框架 -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/frame/jquery.contextmenu.r2.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/frame/bean.jquery.auto-windows.js"></script>
<!-- 菜单 -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/frame/tab-manager.js"></script>
<link type="text/css"
	href="<%=request.getContextPath()%>/css/menu/menu.css" rel="stylesheet"></link>
<link type="text/css"
	href="<%=request.getContextPath()%>/css/menu/style.css"
	rel="stylesheet"></link>
<link type="text/css"
	href="<%=request.getContextPath()%>/css/menu/tab-button.css"
	rel="stylesheet"></link>
<!-- 按钮 -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/button/_button.js"></script>
<!-- 时钟 -->
<script type="text/javascript"
	src="<%=request.getContextPath()%>/js/develop/clock.js"></script>
<script type="text/javascript">
	$(window).resize(
			function() {
				var domHead = $("#page_head");
				var domContent = $("#page_content");
				var domFoot = $("#page_foot");
				var domMenu = $("#page_menu");
				var domBody = $("#page_body");
				var htmlBody = $("body");
				var menuContainer = $("#menu_container");
				var iframeContainer = $("#iframe_container");
				var tabContainer = $("#tab_container");
				var tabContainer$tabs = $("#tab_container .tabs");
				domContent.css({
					height : function() {
						return htmlBody.innerHeight() - domHead.outerHeight()
								- domFoot.outerHeight();
					}
				});
				domMenu.css({
					height : function() {
						return domContent.innerHeight();
					}
				});
				domBody
						.css({
							width : function() {
								return htmlBody.innerWidth()
										- domMenu.outerWidth(true);
							},
							height : function() {
								return domContent.innerHeight()
										- $(this).outerHeight(true)
										+ $(this).innerHeight();
							},
							left : function() {
								return domMenu.outerWidth(true);
							}
						});
				menuContainer.css({
					width : function() {
						return domMenu.innerWidth() - $(this).outerWidth(true)
								+ $(this).innerWidth();
					},
					height : function() {
						return domMenu.innerHeight()
								- $(this).outerHeight(true)
								+ $(this).innerHeight();
					}
				});
				tabContainer.css({
					"top" : function() {
						return domHead.innerHeight()
								- $(this).outerHeight(true);
					}
				});
				tabContainer$tabs.css({
					width : function() {
						return domBody.innerWidth()
								- $("#tab_container .tab-content-menu")
										.outerHeight(true);
					},
					"margin-left" : function() {
						return domMenu.outerWidth(true);
					}
				});
			});
	$(function() {

		//布局页面框架
		$("#page_body").css("background", "white");
		var domHead = $("#page_head");
		var domContent = $("#page_content");
		var domFoot = $("#page_foot");
		var domMenu = $("#page_menu");
		var domBody = $("#page_body");
		var htmlBody = $("body");
		var menuContainer = $("#menu_container");
		var iframeContainer = $("#iframe_container");
		var tabContainer = $("#tab_container");
		var tabContainer$tabs = $("#tab_container .tabs");

		domContent.css({
			height : function() {
				return htmlBody.innerHeight() - domHead.outerHeight()
						- domFoot.outerHeight();
			}
		});
		domMenu.css({
			height : function() {
				return domContent.innerHeight();
			}
		});
		domBody.css({
			width : function() {
				return htmlBody.innerWidth() - domMenu.outerWidth(true);
			},
			height : function() {
				return domContent.innerHeight() - $(this).outerHeight(true)
						+ $(this).innerHeight();
			},
			left : function() {
				return domMenu.outerWidth(true);
			}
		});
		menuContainer.css({
			width : function() {
				return domMenu.innerWidth() - $(this).outerWidth(true)
						+ $(this).innerWidth();
			},
			height : function() {
				return domMenu.innerHeight() - $(this).outerHeight(true)
						+ $(this).innerHeight();
			}
		});
		tabContainer.css({
			"top" : function() {
				return domHead.innerHeight() - $(this).outerHeight(true);
			}
		});
		tabContainer$tabs.css({
			width : function() {
				return domBody.innerWidth()
						- $("#tab_container .tab-content-menu").outerHeight(
								true);
			},
			"margin-left" : function() {
				return domMenu.outerWidth(true);
			}
		});

		menuContainer.click(function(e) {//点击菜单
			var target = $(e.target);
			if (target.is(".type > span")) {
				target.toggleClass("expanded").parent().next().toggle("fast");
			} else if (target.is(".childs > .item")) {
				target.parent().parent().parent().find(".item").removeClass(
						"selected");
				target.addClass("selected");
			} else if (target.is(".type")) {
				target.parent().parent().find(".item").removeClass("selected");
				target.addClass("selected");
			} else if (target.is(".type > b")) {
				target.parent().parent().parent().find(".item").removeClass(
						"selected");
				target.parent().addClass("selected");
			}
		});

		domMenu.resizable({//拉宽,拉窄
			handles : 'e',
			maxWidth : 500,
			helper : 'page_menu-ui-state-highlight',
			start : function() {
				iframeContainer.hide();
			},
			resize : function() {
				domContent.css({
					height : function() {
						return htmlBody.innerHeight() - domHead.outerHeight()
								- domFoot.outerHeight();
					}
				});
				domMenu.css({
					height : function() {
						return domContent.innerHeight();
					}
				});
				domBody
						.css({
							width : function() {
								return htmlBody.innerWidth()
										- domMenu.outerWidth(true);
							},
							height : function() {
								return domContent.innerHeight()
										- $(this).outerHeight(true)
										+ $(this).innerHeight();
							},
							left : function() {
								return domMenu.outerWidth(true);
							}
						});
				menuContainer.css({
					width : function() {
						return domMenu.innerWidth() - $(this).outerWidth(true)
								+ $(this).innerWidth();
					},
					height : function() {
						return domMenu.innerHeight()
								- $(this).outerHeight(true)
								+ $(this).innerHeight();
					}
				});
				tabContainer.css({
					"top" : function() {
						return domHead.innerHeight()
								- $(this).outerHeight(true);
					}
				});
				tabContainer$tabs.css({
					width : function() {
						return domBody.innerWidth()
								- $("#tab_container .tab-content-menu")
										.outerHeight(true);
					},
					"margin-left" : function() {
						return domMenu.outerWidth(true);
					}
				});
			},
			stop : function() {
				iframeContainer.show();
				domContent.css({
					height : function() {
						return htmlBody.innerHeight() - domHead.outerHeight()
								- domFoot.outerHeight();
					}
				});
				domMenu.css({
					height : function() {
						return domContent.innerHeight();
					}
				});
				domBody
						.css({
							width : function() {
								return htmlBody.innerWidth()
										- domMenu.outerWidth(true);
							},
							height : function() {
								return domContent.innerHeight()
										- $(this).outerHeight(true)
										+ $(this).innerHeight();
							},
							left : function() {
								return domMenu.outerWidth(true);
							}
						});
				menuContainer.css({
					width : function() {
						return domMenu.innerWidth() - $(this).outerWidth(true)
								+ $(this).innerWidth();
					},
					height : function() {
						return domMenu.innerHeight()
								- $(this).outerHeight(true)
								+ $(this).innerHeight();
					}
				});
				tabContainer.css({
					"top" : function() {
						return domHead.innerHeight()
								- $(this).outerHeight(true);
					}
				});
				tabContainer$tabs.css({
					width : function() {
						return domBody.innerWidth()
								- $("#tab_container .tab-content-menu")
										.outerHeight(true);
					},
					"margin-left" : function() {
						return domMenu.outerWidth(true);
					}
				});
			}
		});

		tabContainer.dblclick(function(e) {
			var t = $(e.target);
			if (t.is(".btnTab *")) {
				//Begin隐藏头部
				var styleheight = domHead.height();
				domHead.data("margin-top", domHead.data("margin-top")
						|| domHead.css("margin-top"));
				var dataHeight = domHead.data("height")
						|| tabContainer.height();
				domHead.data("height", styleheight);
				domHead.animate({
					"margin-top" : dataHeight - styleheight
				}, "fast", "linear", function() {
					domHead.css({
						"margin-top" : domHead.data("margin-top"),
						height : dataHeight
					});
					//Begin隐藏脚部
					height = domFoot.height();
					domFoot.height(domFoot.data("height") || 0);
					domFoot.data("height", height);
					//End隐藏脚部
					domContent.css({
						height : function() {
							return htmlBody.innerHeight()
									- domHead.outerHeight()
									- domFoot.outerHeight();
						}
					});
					domMenu.css({
						height : function() {
							return domContent.innerHeight();
						}
					});
					domBody.css({
						width : function() {
							return htmlBody.innerWidth()
									- domMenu.outerWidth(true);
						},
						height : function() {
							return domContent.innerHeight()
									- $(this).outerHeight(true)
									+ $(this).innerHeight();
						},
						left : function() {
							return domMenu.outerWidth(true);
						}
					});
					menuContainer.css({
						width : function() {
							return domMenu.innerWidth()
									- $(this).outerWidth(true)
									+ $(this).innerWidth();
						},
						height : function() {
							return domMenu.innerHeight()
									- $(this).outerHeight(true)
									+ $(this).innerHeight();
						}
					});
					tabContainer.css({
						"top" : function() {
							return domHead.innerHeight()
									- $(this).outerHeight(true);
						}
					});
					tabContainer$tabs.css({
						width : function() {
							return domBody.innerWidth()
									- $("#tab_container .tab-content-menu")
											.outerHeight(true);
						},
						"margin-left" : function() {
							return domMenu.outerWidth(true);
						}
					});
				});
				//End隐藏头部
			}
		});
	});
	function changePassword() {
		$("#anotherPassword").dialog({
			modal : true,
			autoOpen : false,
			width : 300,
			position : [ 'center', 250 ],
			show : {
				effect : "scale",
				duration : 1000
			},
			hide : {
				effect : "scale",
				duration : 1000
			}
		});
		$("#anotherPassword").dialog("open");
	}
	function closeDialog(id) {//关闭层
		$("#" + id).dialog('close');
	}
	function logout() {
		_dialog_confirm("确定退出?","关闭", "loginLogoutForm");
	}
	
	$(function(){
		$("#passwordForm").validate({
			rules : {
				password : {
					required : true,
					minlength : 6,
					maxlength : 20
				} 
			},
			messages : {
				password : {
					required : "请输入密码",
					minlength : "请填写6个以上字",
					maxlength : "请填写20个以下的字"	
				} 
			},
			submitHandler : function() {
				$.post("/misc/admin/updateUser.htm", {
					password : $.trim($("#password").val())
				},function(data){
					if(data=="success"){
						alert("success");
					}
					if(data=="error"){
						alert("error");
					}
				});
			}
		});
	});
	function saveSubmit(){
		$("#passwordForm").submit();
	}
</script>
<title>计量院运输管理系统</title>
</head>
<body>
	<div id="page_head">
		<div id="system_menu" style="line-height: 25px;">当前用户:<span style="font-weight: bold; "><%=request.getAttribute("realname")%>&nbsp;&nbsp; </span>
			<a href="#" onclick="changePassword()" class="title_font" style="text-decoration: none;">修改密码</a>&nbsp;&nbsp; 
			<a href="#" class="title_font" style="text-decoration: none;" onclick="logout();">退出 </a>&nbsp;&nbsp;
		</div>
		<div id="tab_container" class="z-bg2 bg">
			<div class="tabs"></div>
			<div class="tab-content-menu">
				<ul></ul>
			</div>
		</div>
	</div>
	<div id="page_content">
		<div id="page_menu">
			<div id="menu_container">
				<div>
					<div class="item type">
						<span class="collapsed"></span><b>信息查询</b>
					</div>
					<div class="childs">
						<div class="item" onclick="openTab({tabName:$(this).html(),location:'<%=request.getContextPath()%>/misc/desktop.htm'})">记账信息1</div>
						<div class="item" onclick="openTab({tabName:$(this).html(),location:'<%=request.getContextPath()%>/misc/desktop.htm'})">记账信息2</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_body">
			<div id="iframe_substitute"></div>
			<div id="iframe_container"></div>
		</div>
	</div>
	<div id="page_foot">
		 <span style="float: left; color: #000000;">
		 		<b>MySql</b>:<span id="clock"></span>&nbsp;&nbsp;
			</span>
	</div>
	<div id="anotherPassword" title="修改密码" style="display: none;">
			<form name="passwordForm" action="" method="post"> 
					<div class="ui-jqgrid ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="background: #FCFCFC;padding: .2em .2em 0;">	
						<center>
							<table cellspacing="0" cellpadding="0" class="grid_table">
								<tr>
									<td width="25%" style="text-align: right;">新密码：</td>
									<td>
									<input type="password" name="password" id="password"/></td>
								</tr>
								<tr>
									<td width="25%" style="text-align: right;">确认密码： </td>
									<td>
									<input type="password" name="password2" id="password2"/></td>
								</tr>
							</table>
								<input type="button" name="subbut" class="ui-state-default ui-corner-all" value='保存' onclick="saveSubmit();"/>
								<input type="button" value='关闭' name="but" class="ui-state-default ui-corner-all" onclick="closeDialog('anotherPassword');"/>
						</center>
					</div>
			</form>
		</div>
		<form name="loginLogoutForm" action="<c:url value="/misc/j_spring_security_logout"/>" method="post">
		</form>
</body>
</html>